<!DOCTYPE HTML>
<html>
<head>
	<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

	<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../common/testdata.js"></script>
	<title>List: Active Content</title>
	<style>
		.rank{
			float: left;
			font-weight: bold;
			padding: 0 5px;
		}
		.title{
			width: 330px;
			overflow: hidden;
			float: left;
		}
		.buttons, .checkbox{
			padding-left: 10px;
			height: 60px;
			padding-top:10px;
			float:right;
		}
	</style>
</head>
<body>
    <div id="testA"></div>
<script type="text/javascript" charset="utf-8">
	webix.ready(function() {
        //data
        var film_set = [
            { id:1, title:"The Shawshank Redemption", year:1994, rank:1, markCheckbox:1},
            { id:2, title:"The Godfather", year:1972,  rank:2, markCheckbox:0},
            { id:3, title:"The Godfather: Part II", year:1974, rank:3},
            { id:4, title:"The Good, the Bad and the Ugly", year:1966, rank:4, markCheckbox:1},
            { id:5, title:"My Fair Lady", year:1964, rank:5, markCheckbox:1},
            { id:6, title:"12 Angry Men", year:1957, rank:6, markCheckbox:0}
        ];

		/*Create new view that extends List and webix.ActiveContent*/
		webix.protoUI({
			name:"activeList"
		},webix.ui.list,webix.ActiveContent);


		webix.ui({
			view: "activeList",
			id:"mylist",
            container:"testA",
			width:650,
            autoheight:true,
			select:true,
			data:film_set,
			activeContent:{
				deleteButton:{
					id:"deleteButtonId",
					view:"button",
					value:"Delete",
					width:80
				},
				editButton:{
					id:"editButtonId",
					view:"button",
					value:"Edit",
					width:80,
					click:editClick
				},
                markCheckbox:{
                    view:"checkbox",
                    width:50,
                    on:{ /*checkbox onChange handler*/
                        'onChange':function(newv, oldv){
                            var item_id = this.config.$masterId;
                            var state = this.getValue()?"Check ":"Uncheck ";
                            webix.message(state+item_id);
                        }
                    }
                }
			},
			template: "<div class='rank'>#rank#.</div><div class='title'>#title#<br>#year# year</div>"+
                    "<div class='buttons'>{common.deleteButton()}</div><div class='buttons'>{common.editButton()}</div>"+
                    "<div class='checkbox'>{common.markCheckbox()}</div>"
                    ,
			type: {
				height:65
			}

		});
		/*Edit click handling*/
		function editClick(id, e){
			var item_id = $$('mylist').locate(e);
			webix.message("Edit "+item_id);
		}
		/*dDelete click handling*/
		$$('deleteButtonId').attachEvent("onItemClick", function(id, e){
			var item_id = $$('mylist').locate(e);
			webix.message("Delete "+item_id);
		});
	});
</script>
</body>
</html>